<template>
  <div class="layout-padding row justify-center">
    <div style="width: 600px; max-width: 100vw;">
        <q-btn v-if="notifyMsgs.length > 0" color="warning" flat
            @click="markReadAll" >
            全部已读
        </q-btn>
        <br/>
        <h6 v-if="notifyMsgs.length<=0" style="text-align: center;">
         <q-icon name="insert emoticon" color="blue"/> 您好，当前没有通知</h6>
        <common-compo v-else v-on:trigger-refresh="refresher" :enableScrollLoading="scrollLoading" enableToTop>
            <q-list highlight inset-separator slot="content">
              <q-item  multiline v-for="msg in notifyMsgs" :key="msg.id" @click="toMsgDetail(msg)">
                <q-item-side :avatar="msg.logoRes | avatarView" />
                <q-item-main
                  :label="msg.nickname"
                  label-lines="2"
                  :sublabel="msg.remark"
                  sublabel-lines="4"
                />
                <q-item-side right >
                  <q-item-tile stamp>{{msg.createdDate | formatDateToTime}}</q-item-tile>
                  <q-item-tile :icon="getMsgIcon(msg.notifyType)" color="primary" />
                </q-item-side>

                <q-item-side right>
                    <q-btn flat round small :color="msg.read ? 'primary' : 'red' " :disabled="msg.read" 
                        icon="adjust">
                    </q-btn>
                    <q-item-main label="已读" />
                </q-item-side>
              </q-item>
          </q-list>
        </common-compo>
    </div>
  </div>
</template>

<script>
import {
  QList,
  QItem,
  QItemSeparator,
  QItemSide,
  QItemMain,
  QItemTile,
  QRadio,
  BackToTop,
  Ripple,
  QBtn,
  QIcon,
  QFixedPosition
} from "quasar";
import commonCompo from "../common-compo";
import notifyApi from "../../../https/notifyApi";
export default {
  components: {
    commonCompo,
    QList,
    QItem,
    QItemSeparator,
    QItemSide,
    QItemMain,
    QItemTile,
    QRadio,
    BackToTop,
    Ripple,
    QBtn,
    QIcon,
    QFixedPosition
  },
  directives: {
    BackToTop,
    Ripple
  },
  data() {
    return {
      scrollEle: null,
      notifyMsgs: [],
      page: 0,
      totalPages: 0,
      scrollLoading: false
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    clearDatas(){
      this.notifyMsgs = [],
      this.page=0,
      this.totalPages=0,
      this.scrollLoading=false
    },
    loadData() {
      const _prelength = this.notifyMsgs.length
      notifyApi
        .list("?isSys=false")
        .then(res => {
          const { status, data:{content,totalPages}} = res;
          if (status == 200 && content) {
            this.notifyMsgs = this.notifyMsgs.concat(content);
            this.totalPages = totalPages;
            this.isStopRefresher(_prelength,this.notifyMsgs.length)
          }
        })
        .catch(err => {});
            // this.totalPages = 3;
            // this.notifyMsgs = this.notifyMsgs.concat([
            //   {
            //     id: this.page + 10,
            //     data: {
            //       logoRes: "statics/boy-avatar.png",
            //       nickname: "小狼油梦",
            //       something: "赞了您的回复：您说的什么啊...."
            //     },
            //     read: false,
            //     notifyType: "REPLY_LIKED_EV",
            //     refId: this.page + 100,
            //     createdDate: Date.now()
            //   },
            //   {
            //     id: this.page + 100,
            //     data: {
            //       logoRes: "statics/boy-avatar.png",
            //       nickname: "小黑",
            //       something: "赞了您的帖子：花有重开热日，人无再少年啊...."
            //     },
            //     read: true,
            //     notifyType: "TOPIC_LIKED_EV",
            //     refId: this.page + 10,
            //     createdDate: Date.now()
            //   }
            // ]);
    },
    /**
      TOPIC_LIKED_EV,主题点赞事件
      REPLY_LIKED_EV,回复点赞事件
      FOLLOW_EV,关注事件
      UNFOLLOW_EV;取消关注
     */
    toMsgDetail(msg) {
      console.log("查看消息详情", msg);
      if (msg) {
        this.markReadOne(msg);
        const _type = msg.notifyType;
        switch (_type) {
          case "TOPIC_LIKED_EV":
            this.$router.push("/community/topic-detail?topicId=" + msg.refId);
            break;
          case "REPLY_LIKED_EV":
            this.$router.push("/community/reply-detail?replyId=" + msg.refId);
            break;
          case "FOLLOW_EV":
            this.$router.push("/personal/personal-home?customerId=" + msg.refId);
            break;
          default:
            break;
        }
      }
    },
    markReadOne(msg) {
      if (msg) {
        msg.read = true;
        notifyApi
          .readOne(msg.id)
          .then(res => {
            console.log("单个已读");
          })
          .catch(err => {});
      }
    },
    markReadAll() {
      const _isOver = this.notifyMsgs.every(a=>a.read=true)
      if(_isOver) return false;
      this.notifyMsgs.map(msg => {
        msg.read = true;
      });
      notifyApi
        .readAll()
        .then(res => {
          if(res.status == 200) {
            this.clearDatas();
            this.loadData();
            console.log("全部已读");
          }
        })
        .catch(err => {});
    },
    getMsgIcon(notifyType) {
      if (!notifyType) return "";
      if (notifyType == "REPLY") {
        return "comment";
      } else if (notifyType == "TOPIC") {
        return "bubble chart";
      }
    },
    refresher(_ele) {
      this.scrollEle = _ele;
      this.scrollLoading = true;
      this.page++;
      console.log("控制滚动元素：page=",this.page,",totalPages=",this.totalPages);
      if (this.page > this.totalPages-1) {
        _ele.stop();
        this.scrollLoading = false;
        return;
      }
      this.loadData();
    },
    isStopRefresher(_prelength,_suflength) {
      console.log("前,", _prelength, "后,", _suflength);
      if (_prelength == _suflength) {
        console.log('停止滚动');
        this.scrollEle.stop();
        this.scrollLoading = false;
      }
    }
  }
};
</script>
